<template>
	<view class="content" v-show="show">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-cont" style="position: fixed; top: 0; left: 0;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/fh.png"></image>
				</view>
				<view class="w-250 h-100 w-row-center w-wz-conts font-36">取款管理</view>
				<view class="wh-80">

				</view>
			</view>
		</view>
		<view class="bwh-100"></view>
		<!-- 头部导航结束 -->
		<view class="bwh-20"></view>
		<!-- 内容区域 -->

		<view class="w-720 w-bj-cont w-bor-12 w-column-align">
			<view class="wh-20"></view>
			<view class="w-680 h-260 w-relative">
				<image class="w-680 h-260 w-bor-12" src="../../../static/gane/wiial.png"></image>
				<view class="w-680 h-260 w-absolute-left font-36b w-col-center w-bor-12">
					<view class="w-600 h-60 ">
						<view class="w-wz-white">余额：<text class="w-wz-gree">￥{{money}}</text></view>
					</view>
					<view class="w-600 h-60 ">
						<view class="w-wz-white">彩金：<text class="w-wz-gree">￥{{voucher}}</text></view>
					</view>
					<view class="w-600 h-60 ">
						<view class="w-wz-white">昵称：<text>{{nickname}}</text></view>
					</view>

				</view>
			</view>
			<view class="wh-30"></view>
			
			<view class="tabs">
				<view class="item" :class="{active: type=='bank'}" @click="type='bank'">银行卡</view>
				<view class="item" :class="{active: type=='alipay'}" @click="type='alipay'">支付宝</view>
			</view>
			<view class="wh-20"></view>
			
			<block v-if="type=='bank'">
				<input v-model="bank_name" style="width: 610rpx; border: solid 2rpx #ccb581;; padding: 20rpx; border-radius: 12rpx; color: #ffffff;" type="text" placeholder="请输入开户银行" placeholder-class="w-wz-conts">
				<view class="wh-20"></view>
				<input v-model="bank_number" style="width: 610rpx; border: solid 2rpx #ccb581;; padding: 20rpx; border-radius: 12rpx; color: #ffffff;" type="text" placeholder="请输入银行卡号" placeholder-class="w-wz-conts">
				<view class="wh-20"></view>
				<input v-model="bank_username" style="width: 610rpx; border: solid 2rpx #ccb581;; padding: 20rpx; border-radius: 12rpx; color: #ffffff;" type="text" placeholder="请输入开户姓名" placeholder-class="w-wz-conts">
				<view class="wh-20"></view>
			</block>
			
			<block v-if="type=='alipay'">
				<input v-model="alipay_number" style="width: 610rpx; border: solid 2rpx #ccb581;; padding: 20rpx; border-radius: 12rpx; color: #ffffff;" type="text" placeholder="请输入支付宝账号" placeholder-class="w-wz-conts">
				<view class="wh-20"></view>
				<input v-model="alipay_username" style="width: 610rpx; border: solid 2rpx #ccb581;; padding: 20rpx; border-radius: 12rpx; color: #ffffff;" type="text" placeholder="请输入支付宝姓名" placeholder-class="w-wz-conts">
				<view class="wh-20"></view>
			</block>
			
			<input v-model="amoney" style="width: 610rpx; border: solid 2rpx #ccb581;; padding: 20rpx; border-radius: 12rpx; color: #ffffff;" type="number" placeholder="请输入提款金额" placeholder-class="w-wz-conts">
			<view class="wh-50"></view>
			<button style="width: 650rpx; background-color: #ccb581;" @click="submitForm()">提交</button>
			<view class="wh-50"></view>
			<view class="w-200 w-row-center" @click="RouteIndex()">
				<image class="wh-40" src="../../../static/gane/czjl.png"></image>
				<view class="h-80 w-row-center w-wz-conts font-32 m-left-2 m-bottom-6">取款记录</view>
			</view>
			<view class="wh-100"></view>
		</view>

	</view>
</template>

<script>
	import $H from '@/pages/common/request.js'
	export default {
		data() {
			return {
				UserInfo: {},
				show: false,
				money: null,
				voucher: null,
				nickname: null,
				amoney: '',
				type: 'bank',
				alipay_number: uni.getStorageSync('alipay_number') || '',
				alipay_username: uni.getStorageSync('alipay_username') || '',
				bank_name: uni.getStorageSync('bank_name') || '',
				bank_number: uni.getStorageSync('bank_number') || '',
				bank_username: uni.getStorageSync('bank_username') || '',

			}
		},

		onLoad() {
			
			this.UserInfo = uni.getStorageSync('UserInfo');
			if (this.UserInfo.uid && this.UserInfo.token) {
				this.getMoney()
			} else {
				return uni.reLaunch({
					url: '/pages/index/index'
				});
			}

		},

		methods: {

			submitForm() {

				if (Number(this.amoney > Number(this.money))) {
					return uni.showToast({
						title: '余额不足',
						duration: 1000,
						icon: 'none'
					});
				}
				
				if(this.type == 'bank'){
					uni.setStorageSync('bank_name', this.bank_name)
					uni.setStorageSync('bank_number', this.bank_number)
					uni.setStorageSync('bank_username', this.bank_username)
				}
				if(this.type == 'alipay'){
					uni.setStorageSync('alipay_number', this.alipay_number)
					uni.setStorageSync('alipay_username', this.alipay_username)
				}
				
				
				$H.post('/app_user_wallet', {
					type: 'take',
					amoney: this.amoney,
					bank_name: this.type == 'bank' ? this.bank_name : '支付宝',
					bank_number: this.type == 'bank' ? this.bank_number : this.alipay_number,
					bank_username: this.type == 'bank' ? this.bank_username : this.alipay_username,
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						setTimeout(()=>{
							this.routerBack()
						}, 2000)
					}
					if(res.msg){
						return uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},

			getMoney() {
				$H.post('/app_user_money').then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.show = true
						this.money = res.data.money
						this.voucher = res.data.voucher
						this.nickname = res.data.nickname
					} else {
						uni.clearStorageSync()
						uni.reLaunch({
							url: '/pages/index/index'
						});
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},

			RouteIndex() {
				uni.navigateTo({
					url: '/pages/my/wallet/take_money_log'
				});
			},

			

		}
	}
</script>

<style lang="less">
	.tabs{
		display: flex;
		justify-content: center;
		color: #fff;
		background-color: #363636;
		width: 660rpx;
		border-radius: 12rpx;
		.item{
			width: 200rpx;
			text-align: center;
			padding: 20rpx 0;
			color: #aaa;
			position: relative;
		}
		.active{
			color: #ccb581;
		}
		.active::before{
			content: '';
			width: 140rpx;
			height: 6rpx;
			background-color: #ccb581;
			position: absolute;
			bottom: -2rpx;
			left: 50%;
			margin-left: -70rpx;
		}
	}
</style>
